﻿<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html" charset="utf-8">
    <title>Y86-64</title>
    <style type="text/css">
        body, p {
            margin: 0;
            overflow-y:hidden;
        }

        body, html, .container {
            height: 100%;
            background-size: 100% 100%;
            background-image: url(Background.png);
        }

        .Control {
            float: left;
            height: 7%;
            width: 42%;
            margin: 10px 4%;
        }

        .header {
            height: 7%;
            width: 50%;
            float: left;
        }

        .Codes {
            margin-left: 3%;
            float: left;
            height: 53%;
            width: 52%;
            display: -moz-box;
            display: -webkit-box;
            overflow: auto;
        }

        .Stack {
            float: left;
            height: 53%;
            width: 20%;
            overflow: auto;
        }

        .Registers {
            float: left;
            height: 35%;
            width: 21%;
            margin-right: 4%;
            overflow: auto;
        }

        .Conditions {
            margin-top: 2%;
            float: left;
            height: 18%;
            width: 25%;
        }
        
        .Pipelines {
            width:100%;
            float: left;
            height: 38%;
            margin-top: 2%;
        }

        .outlook{
            width: 100%;
            display: -webkit-flex;
            -webkit-box-sizing: border-box;
        }

        .outlook1 {
            display: -webkit-flex;
            -webkit-flex: 1;
            -webkit-align-items: center;
            -webkit-box-sizing: border-box;
            height:7%;
        }
        .outlook2 {
            -webkit-box-sizing: border-box;
            margin: 0;
            text-align: center;
        }
        .outlook3 {
            width: 100%;
            display: -webkit-flex;
            -webkit-flex: 1;
            -webkit-align-items: center;
            -webkit-box-sizing: border-box;
            height: 14%;
        }
        .outlook4 {
            -webkit-box-sizing: border-box;
            margin: 0 2%;
            float: left;
        }

        .outlook5 {
            -webkit-box-sizing: border-box;
            margin: 0 2%;
            float: left;
            width: 100%;
        }

        .outlook6 {
            width: 30%;
            display: -webkit-flex;
            -webkit-flex: 1;
            -webkit-align-items: center;
            -webkit-box-sizing: border-box;
            height: 14%;
            float: left;
        }

        h5 {
            margin: 0;
        }

        h6 {
            margin: 0;
        }

        h3 {
            display: inline-block;
            width: 120px;
            flex: 0 0 120px;
            text-align: center;
            border: none;
            padding: 2px;
            margin: 1px 0;
        }

        h4 {
            margin:0;
        }
        .box {
            display: block;
            width: 10%;
            max-width: 150px;
            padding: 2px 5px;
            -webkit-align-items: center;
            -webkit-box-sizing: border-box;
            height: 5%;
        }
        .box1 {
            display: block;
            width: 100%;
            /*max-width: 150px;*/
            padding: 2px 5px;
            -webkit-align-items: center;
            -webkit-box-sizing: border-box;
            height: 100%;
        }
        .Str {
            width:initial;
            display: flex;
            flex-flow: row wrap;
        }
        .asum {
            flex: 100%;
            display: flex;
            width: initial;
            flex-flow: initial;
            flex-wrap: nowrap;
        }
        .mark {
            background-color: #00ff90;
            font-weight: bold;
        }
        .logo {
            width: 5%;
            height: 5%;
            margin: 0 2%;
            float: left;
        }

        p{
            font-size: 15px;
        }
    </style>
    <script type="text/javascript">
        //设置页面属性，不执行默认处理（拒绝被拖放）
        var lines = new Array();
        var rbp;
        var light = {};
        var RET = "";				// 服务器返回的字符串
		var POS = new Array();		// 每个 clock 起始位置
		var MEM = new Array();		// 内存
		var MAXCLOCK;				// 最大 clock 位置（没有这个 clock，只有 MAXCLOCK - 1）
		var Stack = new Array();	// 保存内存的改变
		var CLK = 0;				// 保存当前 CLK 位置
		var CurMaxClk = 0;			// 走过的最大 Clk
		var PC = "0x000";				// 记录当前 PC
        var registers = new Array("%rax", "%rcx", "%rdx", "%rbx", "%rsp", "%rbp", "%rsi", "%rdi",
            "%r8", "%r9", "%r10", "%r11", "%r12", "%r13", "%r14");
        var REG = new Array("rax", "rcx", "rdx", "rbx", "rsp", "rbp", "rsi", "rdi",
            "r8", "r9", "r10", "r11", "r12", "r13", "r14");
        var REG1 = new Array("rax1", "rcx1", "rdx1", "rbx1", "rsp1", "rbp1", "rsi1", "rdi1",
            "r81", "r91", "r101", "r111", "r121", "r131", "r141");
        var Fetch = {
            predPC: '0'
        }
        var Decode = {
            stat: "Bubble",
            icode: "1",
            ifun: "0",
            rA: "NONE",
            rB: "NONE",
            valC: '0',
            valP: '0'
        }
        var Execute = {
            stat: "Bubble",
            icode: "1",
            ifun: "0",
            valC: '0',
            valA: '0',
            valB: '0',
            dstE: "NONE",
            dstM: "NONE",
            srcA: "NONE",
            srcB: "NONE"
        }
        var Memory = {
            stat: "Bubble",
            icode: "1",
            Cnd: '0',
            valE: '0',
            valA: '0',
            dstE: "NONE",
            dstM: "NONE"
        }
        var Write = {
            stat: "Bubble",
            icode: "1",
            valE: '0',
            valM: '0',
            dstE: "NONE",
            dstM: "NONE"
        }
        document.ondragover = function(e){e.preventDefault();};
        document.ondrop = function (e) { e.preventDefault(); }
        window.onload = function () {
            var container = document.getElementById("container");
            var dest = document.getElementById("Codes");
            function init() {
                container.addEventListener("dragover", function (ev) {
                    ev.stopPropagation();
                    ev.preventDefault();
                }, false);

                container.addEventListener("dragend", function (ev) {
                    ev.stopPropagation();
                    ev.preventDefault();
                }, false);

                container.addEventListener("drop", function (ev) {
                    ev.stopPropagation();
                    ev.preventDefault();

                    var file = ev.dataTransfer.files[0];
                    var yofile = new File([file], "file");
                    var reader = new FileReader();
                    var fd = new FormData();
                    fd.append('file', yofile);
                    var xhr = new XMLHttpRequest();
                    xhr.open('POST', '/upload', true);//此处加上url
                    xhr.onload=function(){
                        if(this.status === 200)
                        {
                            RET=this.responseText;
							preprocess();
                        }
                        console.log("upload succeed");
                    }
                    xhr.send(fd);
                    xhr=null;
                    reader.readAsText(file);
                    reader.onload = function (f) {
                        var text = document.createElement("Codes");
                        text.id = "newCodes";
                        var html = '<pre><div class = "Str" id = "Str">';
                        var string = '';
                        var i = 0;
                        function cut(item) {
                            var div = '<div class = "asum" id = "asum">' + item + '</div>';
                            return div;
                        }
                        while (i < this.result.length) {
                            if (this.result[i] !== '\n')
                                string += this.result[i];
                            else {
                                html += cut(string);
                                string = '';
                            }
                            i++;
                        }
                        html += '</div></pre>';
                        dest.appendChild(text);
                        text.innerHTML = html;
                        var x = document.getElementById("newCodes");//建立了键值对PC与位置相对应的
                        for (var j = 0; j < x.getElementsByClassName("asum").length; j++) {
                            lines[j] = x.getElementsByClassName("asum")[j];
                            if (lines[j].innerHTML.substring(0, 2) === "0x" &&
                                lines[j].innerHTML[7] !== ' ') {
                                if (lines[j].innerHTML.substring(0,5) === "0x000") {
                                    lines[j].className += ' mark';
                                }
                                light[lines[j].innerHTML.substring(0, 5)] = j;
                            }
                        }
                    }
                    Reset();
                    switch (lines[lines.length - 1].innerHTML[7]) {
                        case '0':
                        case '1':
                        case '9':
                            rbp = lines[lines.length - 1].innerHTML[7]
                    }
                }, false);
            }
            init();
        }
		var clock = 1;
		var interval;
		var last = '-1';
		function hightLight()
		{
			process(1);
			if (CLK == MAXCLOCK - 1)
				interval = window.clearInterval(interval);
		}
        function preprocess() {
			var str = "";
			var i, clock = 0;
			for (i=0; RET[i] !== '\n'; i++) {
				str = str + RET[i];
				if (i == 7) {
					MEM[i / 8] = str;
					str = "";
				}
			}
			if (i % 8 != 0)
				MEM[i / 8] = str;
			while (i < RET.length)
			{
				while (i < RET.length && RET[i] !== '#') {
					i++;
				}
				i = i + 2;
				if (RET[i] == "#") {
					MAXCLOCK = clock;
					break;
				}
				POS[clock] = i;
				clock++;
			}
			POS[clock] = i;
        }
        function process(step) {
			console.log(PC);
			if (CLK + step == MAXCLOCK)
				return;
            var Clock = "", Status = "", ZF = "", SF = "", OF = "";
			PC = "";
			
			if (CLK > CurMaxClk)
				CurMaxClk = CLK;
            var j = POS[CLK];
            for (; RET[j] !== '\n'; j++) {
                Clock += RET[j];
            }
            j++;
			var s = RET.substring(j, j + 30).split('\n');
			var s0 = s[0].split(' ');
			PC = s0[0];
			Status = s0[1];
			ZF = s0[2][0];
			SF = s0[2][1];
			OF = s0[2][2];
            j++;
            j += s[0].length + 1;
			s = RET.substring(j, j + 17 * 15).split('\n');
            for (var i = 0; i < 15; i++) {
                if (s[i] !== document.getElementById(REG[i]).innerHTML) {
                    var Aim_reg = document.getElementById(REG[i]);//改数
                    Aim_reg.innerHTML = s[i];
                    var aim_reg = document.getElementById(registers[i]);//对一行加高亮
                    aim_reg.className += ' mark';//加个延时1s
                    aim_reg.className = 'box1';
                }
				j += s[i].length + 1;
            }

            while (RET[j] !== 'W') {
                Stack[RET.substring(j, j + 5)] = RET.substring(j + 23, j + 39);
                if(Stack)
                j += 40;
            }

            var end = POS[CLK + 1] - 3;
            var stat = RET.substring(j, end).split('\n');
			for (var i = 0; i < 5; i++) {
				var s = stat[i].split(' ');
				switch (i) {
                    case 0:
                        document.getElementById("Write Backstat").innerHTML = s[1];
                        document.getElementById("Write Backicode").innerHTML = s[2];
                        document.getElementById("Write BackvalE").innerHTML = s[3];
                        document.getElementById("Write BackvalM").innerHTML = s[4];
                        document.getElementById("Write BackdstE").innerHTML = s[5];
                        document.getElementById("Write BackdstM").innerHTML = s[6];
						break;
                    case 1:
                        document.getElementById("Memorystat").innerHTML = s[1];
                        document.getElementById("Memoryicode").innerHTML = s[2];
                        document.getElementById("MemoryCnd").innerHTML = s[3];
                        document.getElementById("MemoryvalE").innerHTML = s[4];
                        document.getElementById("MemoryvalA").innerHTML = s[5];
                        document.getElementById("MemorydstE").innerHTML = s[6];
                        document.getElementById("MemorydstM").innerHTML = s[7];
						break;
                    case 2:
                        document.getElementById("Executestat").innerHTML = s[1];
                        document.getElementById("Executeicode").innerHTML = s[2];
                        document.getElementById("Executeifun").innerHTML = s[3];
                        document.getElementById("ExecutevalC").innerHTML = s[4];
                        document.getElementById("ExecutevalA").innerHTML = s[5];
                        document.getElementById("ExecutevalB").innerHTML = s[6];
                        document.getElementById("ExecutedstE").innerHTML = s[7];
                        document.getElementById("ExecutedstM").innerHTML = s[8];
                        document.getElementById("ExecutesrcA").innerHTML = s[9];
                        document.getElementById("ExecutesrcB").innerHTML = s[10];
						break;
                    case 3:
                        document.getElementById("Decodestat").innerHTML = s[1];
                        document.getElementById("Decodeicode").innerHTML = s[2];
                        document.getElementById("Decodeifun").innerHTML = s[3];
                        document.getElementById("DecoderA").innerHTML = s[4];
                        document.getElementById("DecoderB").innerHTML = s[5];
                        document.getElementById("DecodevalC").innerHTML = s[6];
                        document.getElementById("DecodevalP").innerHTML = s[7];
						break;
                    case 4:
                        document.getElementById("FetchpredPC").innerHTML = s[1];
                }
			}
			if (PC in light) {
				if (last in light)
					lines[light[last]].className = "asum";
				last = PC;
				lines[light[PC]].className += ' mark';
			}
            CLK = CLK + step;
            if (PC in light) {
                if (last in light)
                    lines[light[last]].className = "asum";
                last = PC;
                lines[light[PC]].className += ' mark';
                lines[light[PC]].scrollIntoView({ block: "center", behavior: "smooth" });
            }
			console.log("PC: " + PC);
        }

        function Step() {
            process(1);
        }
        function Go() {
			interval = self.setInterval("hightLight()", 200);
        }
        function Back() {
			process(-1);
        }
        function Reset() {
            for (var i = 0; i < 15; i++) {
                document.getElementById(REG[i]).innerHTML = "0000000000000000";
                document.getElementById(REG1[i]).innerHTML = "0x";
            }
            document.getElementById("ZF").innerHTML = "= 1";
            document.getElementById("SF").innerHTML = "= 0";
            document.getElementById("OF").innerHTML = "= 0";
            document.getElementById("Clock").innerHTML = "= 0";
            document.getElementById("PC").innerHTML = "= 0";
            document.getElementById("State").innerHTML = "= AOK";
            if (CLK !== 0) {
                lines[light["0x000"]].className += " mark";
                lines[light[last]].className = "asum";
                CLK = 0;
            }
            document.getElementById("FetchpredPC").innerHTML = "0";
            document.getElementById("Decodestat").innerHTML = "Bubble";
            document.getElementById("Decodeicode").innerHTML = "1";
            document.getElementById("Decodeifun").innerHTML = "0";
            document.getElementById("DecoderA").innerHTML = "None";
            document.getElementById("DecoderB").innerHTML = "None";
            document.getElementById("DecodevalC").innerHTML = "0";
            document.getElementById("DecodevalP").innerHTML = "0";
            document.getElementById("Executestat").innerHTML = "Bubble";
            document.getElementById("Executeicode").innerHTML = "1";
            document.getElementById("Executeifun").innerHTML = "0";
            document.getElementById("ExecutevalC").innerHTML = "0";
            document.getElementById("ExecutevalA").innerHTML = "0";
            document.getElementById("ExecutevalB").innerHTML = "0";
            document.getElementById("ExecutedstE").innerHTML = "None";
            document.getElementById("ExecutedstM").innerHTML = "None";
            document.getElementById("ExecutesrcA").innerHTML = "None";
            document.getElementById("ExecutesrcB").innerHTML = "None";
            document.getElementById("Memorystat").innerHTML = "Bubble";
            document.getElementById("Memoryicode").innerHTML = "1";
            document.getElementById("MemoryCnd").innerHTML = "0";
            document.getElementById("MemoryvalE").innerHTML = "0";
            document.getElementById("MemoryvalA").innerHTML = "0";
            document.getElementById("MemorydstE").innerHTML = "None";
            document.getElementById("MemorydstM").innerHTML = "None";
            document.getElementById("Write Backstat").innerHTML = "Bubble";
            document.getElementById("Write Backicode").innerHTML = "1";
            document.getElementById("Write BackvalE").innerHTML = "0";
            document.getElementById("Write BackvalM").innerHTML = "0";
            document.getElementById("Write BackdstE").innerHTML = "None";
            document.getElementById("Write BackdstM").innerHTML = "None";
        }
    </script>
</head>
<body>
    <div class="container" id="container">
        <div class="Control" id="Control">
            <div class="logo"><img src="Step.png" style="width:150%; cursor: pointer;" onclick=" Step()"></div>
            <div class="logo"><img src="Go.png" style="width:150%; cursor: pointer;" onclick=" Go()"></div>
            <div class="logo"><img src="Back.png" style="width:150%; cursor: pointer;" onclick=" Back()"></div>
            <div class="logo"><img src="Reset.png" style="width:150%; cursor: pointer;" onclick=" Reset()"></div>
        </div>

        <div class="header" id="header" style="text-align:right;">
            <h3 style="margin: 0; padding: 0; width: 50%; text-align: right;">Y86 Emulator</h3>
            <h4 style="margin: 0;">Source Code: Gitee, by haibin Zhang, xiang Luo</h4>
        </div>

        <div class="Codes" id="Codes">
            <h3 style="margin: 0; padding: 0; text-align:left;">Codes</h3>
        </div>

        <div class="Stack" id="Stack">
            <h3 style="margin: 0; padding: 0; text-align:left;">Stack</h3>

        </div>

        <div class="Registers" id="Registers">
            <h3 style="margin: 0; padding: 0; text-align:left;">Registers</h3>
            <div class="outlook3">
                <div class="box1" id="%rax">
                    <h5 div class="outlook4" style="padding-top: 1%;">%rax</h5>
                    <h4 div class="outlook4" style="margin-right:0; margin-left: 4%;" id="rax1"></h4><h4 div class="outlook4" style="margin-left:0;" id="rax"></h4>
                </div>
            </div>
            <div class="outlook3">
                <div class="box1" id="%rcx">
                    <h5 div class="outlook4" style="padding-top: 1%;">%rcx</h5>
                    <h4 div class="outlook4" style="margin-right:0; margin-left: 4%;" id="rcx1"></h4><h4 div class="outlook4" style="margin-left:0;" id="rcx"></h4>
                </div>
            </div>
            <div class="outlook3" id="%rdx">
                <div class="box1">
                    <h5 div class="outlook4" style="padding-top: 1%;">%rdx</h5>
                    <h4 div class="outlook4" style="margin-right:0; margin-left: 4%;" id="rdx1"></h4><h4 div class="outlook4" style="margin-left:0;" id="rdx"></h4>
                </div>
            </div>
            <div class="outlook3">
                <div class="box1" id="%rbx">
                    <h5 div class="outlook4" style="padding-top: 1%;">%rbx</h5>
                    <h4 div class="outlook4" style="margin-right:0; margin-left: 4%;" id="rbx1"></h4><h4 div class="outlook4" style="margin-left:0;" id="rbx"></h4>
                </div>
            </div>
            <div class="outlook3">
                <div class="box1" id="%rsp">
                    <h5 div class="outlook4" style="padding-top: 1%;">%rsp</h5>
                    <h4 div class="outlook4" style="margin-right:0; margin-left: 4%;" id="rsp1"></h4><h4 div class="outlook4" style="margin-left:0;" id="rsp"></h4>
                </div>
            </div>
            <div class="outlook3">
                <div class="box1" id="%rbp">
                    <h5 div class="outlook4" style="padding-top: 1%;">%rbp</h5>
                    <h4 div class="outlook4" style="margin-right:0; margin-left: 4%;" id="rbp1"></h4><h4 div class="outlook4" style="margin-left:0;" id="rbp"></h4>
                </div>
            </div>
            <div class="outlook3">
                <div class="box1" id="%rsi">
                    <h5 div class="outlook4" style="padding-top: 1%;">%rsi</h5>
                    <h4 div class="outlook4" style="margin-right:0; margin-left: 4%;" id="rsi1"></h4><h4 div class="outlook4" style="margin-left:0;" id="rsi"></h4>
                </div>
            </div>
            <div class="outlook3">
                <div class="box1" id="%rdi">
                    <h5 div class="outlook4" style="padding-top: 1%;">%rdi</h5>
                    <h4 div class="outlook4" style="margin-right:0; margin-left: 4%;" id="rdi1"></h4><h4 div class="outlook4" style="margin-left:0;" id="rdi"></h4>
                </div>
            </div>
            <div class="outlook3">
                <div class="box1" id="%r8">
                    <h5 div class="outlook4" style="padding-top: 1%;">%r8&nbsp;</h5>
                    <h4 div class="outlook4" style="margin-right:0; margin-left: 4%;" id="r81"></h4><h4 div class="outlook4" style="margin-left:0;" id="r8"></h4>
                </div>
            </div>
            <div class="outlook3">
                <div class="box1" id="%r9">
                    <h5 div class="outlook4" style="padding-top: 1%;">%r9&nbsp;</h5>
                    <h4 div class="outlook4" style="margin-right:0; margin-left: 4%;" id="r91"></h4><h4 div class="outlook4" style="margin-left:0;" id="r9"></h4>
                </div>
            </div>
            <div class="outlook3">
                <div class="box1" id="%r10">
                    <h5 div class="outlook4" style="padding-top: 1%;">%r10</h5>
                    <h4 div class="outlook4" style="margin-right:0; margin-left: 4%;" id="r101"></h4><h4 div class="outlook4" style="margin-left:0;" id="r10"></h4>
                </div>
            </div>
            <div class="outlook3">
                <div class="box1" id="%r11">
                    <h5 div class="outlook4" style="padding-top: 1%;">%r11</h5>
                    <h4 div class="outlook4" style="margin-right:0; margin-left: 4%;" id="r111"></h4><h4 div class="outlook4" style="margin-left:0;" id="r11"></h4>
                </div>
            </div>
            <div class="outlook3">
                <div class="box1" id="%r12">
                    <h5 div class="outlook4" style="padding-top: 1%;">%r12</h5>
                    <h4 div class="outlook4" style="margin-right:0; margin-left: 4%;" id="r121"></h4><h4 div class="outlook4" style="margin-left:0;" id="r12"></h4>
                </div>
            </div>
            <div class="outlook3">
                <div class="box1" id="%r13">
                    <h5 div class="outlook4" style="padding-top: 1%;">%r13</h5>
                    <h4 div class="outlook4" style="margin-right:0; margin-left: 4%;" id="r131"></h4><h4 div class="outlook4" style="margin-left:0;" id="r13"></h4>
                </div>
            </div>
            <div class="outlook3">
                <div class="box1" id="%r14">
                    <h5 div class="outlook4" style="padding-top: 1%;">%r14</h5>
                    <h4 div class="outlook4" style="margin-right:0; margin-left: 4%;" id="r141"></h4><h4 div class="outlook4" style="margin-left:0;" id="r14"></h4>
                </div>
            </div>
        </div>

        <div class="Conditions" id="Conditions">
            <h3 style="margin: 0; padding: 0; text-align:left;">Conditions</h3><br />
            <div class="outlook6">
                <h4 div class="outlook5">ZF </h4><h4 div class="outlook5" style="margin-left: 0;" id="ZF"></h4>
            </div>
            <div class="outlook6">
                <h4 div class="outlook5">SF </h4><h4 div class="outlook5" style="margin-left: 0;" id="SF"></h4>
            </div>
            <div class="outlook6">
                <h4 div class="outlook5">OF </h4><h4 div class="outlook5" style="margin-left: 0;" id="OF"></h4>
            </div>
            <div class="outlook6">
                <h4 div class="outlook5">Clock </h4><h4 div class="outlook5" style="margin-left: 0;" id="Clock"></h4>
            </div>
            <div class="outlook6">
                <h4 div class="outlook5">PC </h4><h4 div class="outlook5" style="margin-left: 0;" id="PC"></h4>
            </div>
            <div class="outlook6">
                <h4 div class="outlook5">State </h4><h4 div class="outlook5" style="margin-left: 0;" id="State"></h4>
            </div>
        </div>

        <div class="Pipelines" id="Pipelines">
            <div class="outlook">
                <h3>Fetch</h3>
                <div class="outlook1">
                    <div class="box">
                        <h4 div class="outlook2" id="FetchpredPC"></h4>
                        <h6 div class="outlook2" id="predPC">predPC</h6>
                    </div>
                </div>
            </div>
            <div class="outlook">
                <h3>Decode</h3>
                <div class="outlook1">
                    <div class="box">
                        <h4 div class="outlook2" id="Decodestat"></h4>
                        <h6 div class="outlook2" id="stat">stat</h6>
                    </div>
                    <div class="box">
                        <h4 div class="outlook2" id="Decodeicode"></h4>
                        <h6 div class="outlook2" id="icode">icode</h6>
                    </div>
                    <div class="box">
                        <h4 div class="outlook2" id="Decodeifun"></h4>
                        <h6 div class="outlook2" id="ifun">ifun</h6>
                    </div>
                    <div class="box">
                        <h4 div class="outlook2" id="DecoderA"></h4>
                        <h6 div class="outlook2" id="rA">rA</h6>
                    </div>
                    <div class="box">
                        <h4 div class="outlook2" id="DecoderB"></h4>
                        <h6 div class="outlook2" id="rB">rB</h6>
                    </div>
                    <div class="box">
                        <h4 div class="outlook2" id="DecodevalC"></h4>
                        <h6 div class="outlook2" id="valC">valC</h6>
                    </div>
                    <div class="box">
                        <h4 div class="outlook2" id="DecodevalP"></h4>
                        <h6 div class="outlook2" id="valP">valP</h6>
                    </div>
                </div>
            </div>
            <div class="outlook">
                <h3>Execute</h3>
                <div class="outlook1">
                    <div class="box">
                        <h4 div class="outlook2" id="Executestat"></h4>
                        <h6 div class="outlook2" id="stat">stat</h6>
                    </div>
                    <div class="box">
                        <h4 div class="outlook2" id="Executeicode"></h4>
                        <h6 div class="outlook2" id="icode">icode</h6>
                    </div>
                    <div class="box">
                        <h4 div class="outlook2" id="Executeifun"></h4>
                        <h6 div class="outlook2" id="ifun">ifun</h6>
                    </div>
                    <div class="box">
                        <h4 div class="outlook2" id="ExecutevalC"></h4>
                        <h6 div class="outlook2" id="valC">valC</h6>
                    </div>
                    <div class="box">
                        <h4 div class="outlook2" id="ExecutevalA"></h4>
                        <h6 div class="outlook2" id="valA">valA</h6>
                    </div>
                    <div class="box">
                        <h4 div class="outlook2" id="ExecutevalB"></h4>
                        <h6 div class="outlook2" id="valB">valB</h6>
                    </div>
                    <div class="box">
                        <h4 div class="outlook2" id="ExecutedstE"></h4>
                        <h6 div class="outlook2" id="dstE">dstE</h6>
                    </div>
                    <div class="box">
                        <h4 div class="outlook2" id="ExecutedstM"></h4>
                        <h6 div class="outlook2" id="dstM">dstM</h6>
                    </div>
                    <div class="box">
                        <h4 div class="outlook2" id="ExecutesrcA"></h4>
                        <h6 div class="outlook2" id="srcA">srcA</h6>
                    </div>
                    <div class="box">
                        <h4 div class="outlook2" id="ExecutesrcB"></h4>
                        <h6 div class="outlook2" id="srcB">srcB</h6>
                    </div>
                </div>
            </div>
            <div class="outlook">
                <h3>Memory</h3>
                <div class="outlook1">
                    <div class="box">
                        <h4 div class="outlook2" id="Memorystat"></h4>
                        <h6 div class="outlook2" id="stat">stat</h6>
                    </div>
                    <div class="box">
                        <h4 div class="outlook2" id="Memoryicode"></h4>
                        <h6 div class="outlook2" id="icode">icode</h6>
                    </div>
                    <div class="box">
                        <h4 div class="outlook2" id="MemoryCnd"></h4>
                        <h6 div class="outlook2" id="Cnd">Cnd</h6>
                    </div>
                    <div class="box">
                        <h4 div class="outlook2" id="MemoryvalE"></h4>
                        <h6 div class="outlook2" id="valE">valE</h6>
                    </div>
                    <div class="box">
                        <h4 div class="outlook2" id="MemoryvalA"></h4>
                        <h6 div class="outlook2" id="valA">valA</h6>
                    </div>
                    <div class="box">
                        <h4 div class="outlook2" id="MemorydstE"></h4>
                        <h6 div class="outlook2" id="dstE">dstE</h6>
                    </div>
                    <div class="box">
                        <h4 div class="outlook2" id="MemorydstM"></h4>
                        <h6 div class="outlook2" id="dstM">dstM</h6>
                    </div>
                </div>
            </div>
            <div class="outlook">
                <h3>Write Back</h3>
                <div class="outlook1">
                    <div class="box">
                        <h4 div class="outlook2" id="Write Backstat"></h4>
                        <h6 div class="outlook2" id="stat">stat</h6>
                    </div>
                    <div class="box">
                        <h4 div class="outlook2" id="Write Backicode"></h4>
                        <h6 div class="outlook2" id="icode">icode</h6>
                    </div>
                    <div class="box">
                        <h4 div class="outlook2" id="Write BackvalE"></h4>
                        <h6 div class="outlook2" id="valE">valE</h6>
                    </div>
                    <div class="box">
                        <h4 div class="outlook2" id="Write BackvalM"></h4>
                        <h6 div class="outlook2" id="valM">valM</h6>
                    </div>
                    <div class="box">
                        <h4 div class="outlook2" id="Write BackdstE"></h4>
                        <h6 div class="outlook2" id="dstE">dstE</h6>
                    </div>
                    <div class="box">
                        <h4 div class="outlook2" id="Write BackdstM"></h4>
                        <h6 div class="outlook2" id="dstM">dstM</h6>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
